<div class="content">
    <div id="example_title">
        <h1>Enable/Disable Tabs</h1>
        It is easy to enable and disabled tabs
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="tabs" style="width: 100%;"></div>
<br><br>
<button class="w2ui-btn" onclick="btnClick(false)">Disable Tab 2</button>
<button class="w2ui-btn" onclick="btnClick(true)">Enable Tab 2</button>

<!--CODE-->
<script type="module">
import { w2tabs } from '__W2UI_PATH__'

let tabs = new w2tabs({
    box: '#tabs',
    name: 'tabs',
    active: 'tab1',
    tabs: [
        { id: 'tab1', text: 'Tab 1' },
        { id: 'tab2', text: 'Tab 2' },
        { id: 'tab3', text: 'Tab 3' },
        { id: 'tab4', text: 'Tab 4' }
    ]
})

window.btnClick = function(flag) {
    if (flag) {
        tabs.enable('tab2')
    } else {
        tabs.disable('tab2')
    }
}
</script>